<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tongjh原创，交流请发邮件至576272452@qq.com</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://demo.jb51.net/js/2011/artDialog/artDialog.source.js?skin=default"></script>
<script type="text/javascript" src="http://www.uploadify.com/wp-content/themes/uploadify/js/jquery.uploadify.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.uploadify.com/wp-content/themes/uploadify/style.css" />
<script Charset="GB2312">
$(function(){
	var mypath='';//当前所在目录
	//跳转至指定目录
	var goDir = function(path){
			mypath = {path:path};//当前所在目录
			$.ajax({
				type:"GET",
				url:"file.php",
				data:mypath,
				dataType:"json",	
				success:function(json){
					if(json.error){//没有文件或目录
						html = json.error;	
					}else{
						var files = json.files;//得到文件数组json
						var dirs = json.dirs;//得到目录数组json
						var html='';//最后组合的html
						if(dirs){//显示目录
							$.each(dirs,function(k,v){
								html += '<div class="dir" alt="'+v.path+'">'+v.dir+'</div>'; 
							});
						}
						if(files){
							$.each(files,function(k,v){
								html += '<div class="file" alt="'+v.path+'">'+v.file+'</div>'; 
							});	
						}
					}
					$(".box").html(html);//填充HTML
					//完成面包宵导航
					paths = path.split('/');
					var p = "当前位置：";var pp = "";
					for(i=0;i<paths.length;i++){
						pp += paths[i]+'/'; 
						str = pp.slice(0,-1);
						p += '<span class="position" alt="'+str+'">'+paths[i]+'</span> -> ';
					}
					p = p.slice(0,-4);
					$(".weizhi").html(p);
				 }
			});
		}
	//打开页面直接给出默认目录root为根目录
	 goDir("./");
	//点击目录进入下一层
	$(".box").delegate('.dir', 'click', function(e){
		var path =$(this).attr("alt");
		goDir(path);
	});
	//点击位置进入位置
	$(".weizhi").delegate(".position","click",function(){
		 var path = $(this).attr("alt");
		 goDir(path);
	});
	// 捕获在目录上的右击事件   
    $(".box").delegate(".dir","contextmenu",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(this).append('<div class="youjian">'+$(".youjianCopy").html()+'</div>');
		$(".youjian").css({left:offX-5,top:0}); 
		//绑定右键菜单的PATH 
		var path =$(this).attr("alt");
		$(".youjian").attr("alt",path);
		// 拦截右击事件
        return false;  
    });
	// 捕获文件上的右击事件   
    $(".box").delegate(".file","contextmenu",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(this).append('<div class="youjian">'+$(".fileMenu").html()+'</div>');
		$(".youjian").css({left:offX-5,top:0}); 
		//绑定右键菜单的PATH 
		var path =$(this).attr("alt");
		$(".youjian").attr("alt",path);
		// 拦截右击事件
        return false;  
    });
	var myDialog;//artDialog窗口
	//文件及文件右键菜单点击管理目录事件
	$(".box,.weizhi").delegate(".youjian li","click",function(event){
		event.stopPropagation();//阻止事件向上冒泡
		var eName = $(this).attr("alt");//点击事件名称
		var eDir = $(this).parent(".youjian").attr("alt");//执行事件的目录
		//删除目录后刷新父目录
		var path = "";//父路径
		var paths = eDir.split('/');
		for(i=0;i<paths.length-1;i++){
			path += paths[i]+'/';
		}
		var pp = path.slice(0,-1);//去掉最后/的父路径
		if(eName == 'deledir' || eName == 'deleFile'){//ajax执行事件删除目录			
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"file.php",
				data:"eName="+eName+"&eDir="+eDir,
				success: function(json){
					if(json.ok){
						alert(json.ok);
						goDir(pp);
					}else{
						alert(json.error);
						goDir(pp);
					}
				}
			});
		}else if(eName == 'editFile'){//弹出层,编辑文件
			$.ajax({//ajax获得文件的文本内容
				 type:"GET",
				 url:"file.php",
				 dataType:"json",
				 data:"url="+eDir+"&eName="+eName,
				 success: function(json){
					 if(json.fileType == 'pic'){//如果是文件
						 var input = '<img src="'+json.fileStr+'" />';	
						 var button = ''; 
					 }else if(json.fileType == 'txt'){//如果是文本
						 var input = '<textarea name="fname" id="fname" cols="45" rows="5" style="width:810px;height:510px;">'+json.fileStr+'</textarea>';
						 var button = '<input type="button" id="fbutton" value="提交" />';
					 }else{//是不可编辑的文件
						 var input = '文件 [<span style="color:red">'+eDir+'</span>] 不可编辑';	
						 var button = '';  
					 }
					myDialog = art.dialog({//弹出编辑框
						  title:'文件编辑： '+eDir,
						  lock: true,
						  background: '#000',
						  opacity: 0.87,	
						  content:'<form action="" method="get" id="eaction" onsubmit="return false"><div><input name="eName" type="hidden" id="eName" value="fileSave" /><input name="eDir" type="hidden" id="eDir" value="'+eDir+'" />'+input+'</div><div align="right">'+button+'</div></form>'
					 });
				 }	
			});
		}else{//弹出输入文本框,在增加目录、重命名目录、增加文件时需要一个文本框输入input的name
			myDialog = art.dialog({
				  title:'输入文件或目录名称',
				  lock: true,
				  background: '#000',
				  opacity: 0.87,	
				  content:'<form action="" method="get" id="eaction" onsubmit="return false"><div><input name="eName" type="hidden" id="eName" value="'+eName+'" /><input name="eDir" type="hidden" id="eDir" value="'+eDir+'" /><input type="input" name="fname" id="fname" /></div><div align="right"><input name="fname" type="button" id="fbutton" value="提交" /></div></form>'
			 });
		}
	});
	//右键划过管理菜单换背景
	$(".box,.weizhi").delegate(".youjian li","hover",function(){
		$(this).css({background:"#666",color:"#fff"});
	});
	$(".box,.weizhi").delegate(".youjian li","mouseleave",function(){
		$(this).css({background:"#9cc",color:"#000"});	
	});
	//划过.dir or .file背景换色 及 右键离开管理目录事件
	$(".box").delegate(".box>div","hover",function(){
		$(this).css({background:"#9cc"}).siblings().css({background:"#fff"});
	});
	$(".box").delegate(".box>div","mouseleave",function(){
		$("div").remove(".youjian");
	});
	//提交对目录的管理事件
	$("body").delegate("#fbutton","click",function(){
		 var formval = $("#eaction").serialize();
		 myDialog.close();//关闭弹出框
		 //ajax提交对目录的管理事件，增加目录、重命名目录、增加文件
		 $.ajax({
			type:"GET",
			dataType:"json",
			url:"file.php",
			data:formval,
			success: function(json){
				if(json.ok){
					alert(json.ok);
					if(json.fname){
						goDir(json.fname);//如果是重命名目录，则刷新当前目录
					}
				}else{
					alert(json.error);	
				}
			}
		});	 
	});
	//文件批量上传
	$('#file_upload').uploadify({
		'buttonText' : '上传文件到本目录',
		'buttonClass' : 'upbtn',
		'width':120,
		'height':25,
		'swf'      : '/jqup/uploadify.swf',
		'uploader' : 'file.php',
		'formData' : {'eName':'uploads','path':mypath},
		'onUploadSuccess' : function(file,data,response){
				alert(data);//提示信息
		},
		'onUploadStart' : function(file) {
            $("#file_upload").uploadify("settings","formData" ,{"path":mypath});//改变上传值
        },
		'onQueueComplete' : function(queueData) {
            alert('成功上传' + queueData.uploadsSuccessful + '个文件,上传失败'+queueData.uploadsErrored+'个文件');
			goDir(mypath);//跳转到上传目录
        }
		
	});
	//捕获面包屑导航右击事件
	$(".weizhi").delegate(".position","contextmenu",function(e){
		var offX = e.pageX;//获得鼠标偏移X值
		var offY = e.pageY;//获得鼠标偏移Y值
		//设置右键菜单的位置
		$(".weizhi").append('<div class="youjian">'+$(".youjianCopy").html()+'</div>');
		$(".youjian").css({left:offX-5,top:0}); 
		//绑定右键菜单的PATH 
		var path =$(this).attr("alt");
		$(".youjian").attr("alt",path);
		// 拦截右击事件
        return false;
	});
});
</script>
<style>
.file{color:#00f;cursor:pointer;position:relative;}
.dir{color:#f00;cursor:pointer;position:relative;}
.position{cursor:pointer;}
.youjian{cursor:pointer;width:100px;background:#9cc;position:absolute;z-index:999;overflow:hidden;}
.youjian li{list-style:none;line-height:25px;padding-left:10px;color:#000;}
.upbtn{background:#666666;color:#fff;font-size:14px;text-align:center;}
.weizhi{position:relative;}
 </style>
</head>

<body>
<div class="weizhi">当前位置：</div>
<hr /><input type="file" name="file_upload" id="file_upload" />
<div class="box"></div>
<div class="youjianCopy" style="display:none">
    <li alt="addDir">增加目录</li>
    <li alt="addFile">增加文件</li>
    <li alt="rename">重命名目录</li>
    <li alt="deledir">删除目录</li>
</div>
<div class="fileMenu" style="display:none">
    <li alt="editFile">编辑文件</li>
    <li alt="renameFile">重命名文件</li>
    <li alt="deleFile">删除文件</li>
</div>
</body>
</html>